import { useState, useEffect, useMemo } from 'react'
import {
  Tabs,
  TabsList,
  TabsTrigger,
  TabsContent,
} from '@/components/ui/tabs'
import DownloadMusicList from './components/DownloadMusicList'
import PlayMusicList from './components/PlayMusicList'
import { cn } from '@/lib/utils'

const Manage = (): JSX.Element => {

  const tabs = useMemo(() => [
    {
      label: '下载列表',
      key: 'download-list',
      content: <DownloadMusicList />
    },
    {
      label: '播放列表',
      key: 'play-list',
      content: <PlayMusicList />
    },
  ], [])

  const [activeTab, setActiveTab] = useState(tabs[0].key)

  useEffect(() => {
    console.info('[render Page]:%c Manage', 'color: red;', Date.now())
  })

  return <div className='manage-page'>
    <Tabs
      defaultValue={activeTab}
      className='w-full h-full flex flex-col'
      onValueChange={setActiveTab}
    >
      <TabsList className='rounded-sm'>
        {tabs.map((tab) => (
          <TabsTrigger
            key={tab.key}
            value={tab.key}
          >
            <div className='p-2 text-base cursor-pointer'>
              {tab.label}
            </div>
          </TabsTrigger>
        ))}
      </TabsList>
      <div className='manage-content flex-1 overflow-hidden'>
        {tabs.map((tab) => (
          <TabsContent
            key={tab.key}
            value={tab.key}
            className={cn('h-full', activeTab === tab.key ? 'visible' : 'hidden')}
            forceMount
          >
            {tab.content}
          </TabsContent>
        ))}
      </div>
    </Tabs>
  </div>
}

export default Manage
